const webpack = require('webpack');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; // 包分析工具
const CssExtractPlugin = require("mini-css-extract-plugin"); // 分离css到单独的文件中去
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 压缩Js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩Css
const CleanWebpackPlugin = require('clean-webpack-plugin');

// 定义路径
const ROOT_PATH = path.resolve(__dirname); // 注意:__dirname是当前文件的路径
const SRC_PATH = path.resolve(ROOT_PATH, '../src');
const DIST_PATH = path.resolve(ROOT_PATH, '../dist');

const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');


let config = merge(baseConfig, {
    mode: 'none',
    entry: {
        // 入口
        'app': path.join(SRC_PATH, 'app.jsx'),
        'vendor': ['react', 'react-dom']
    },
    output: {
        publicPath: ''  // 打包后生成的url地址，对应后台配置，这样才能让后台正确加载静态资源文件
    },
    module: {
        rules: [{
                // 配置解析less
                test: /\.less$/,
                exclude: path.resolve(ROOT_PATH, 'node_modules'),
                use: [{
                    loader: CssExtractPlugin.loader
                }, {
                    loader: "css-loader",
                }, {
                    loader: "less-loader"
                }, {
                    loader: "postcss-loader",
                    options: {
                        // 添加浏览器前缀
                        plugins: [require("autoprefixer")("last 100 versions")]
                    }
                }]
            },
            {
                // 配置解析css
                test: /\.css$/,
                use: [{
                    loader: CssExtractPlugin.loader
                }, {
                    loader: "css-loader",
                }, {
                    loader: "postcss-loader",
                    options: {
                        // 添加浏览器前缀
                        plugins: [require("autoprefixer")("last 100 versions")]
                    }
                }]
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin([DIST_PATH]),
        new CssExtractPlugin({ // 分离CSS代码 
            filename: "[name].css",
            chunkFilename: "[name].css"
        }),
        new UglifyJsPlugin({ // js优化配置，压缩js代码
            exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩
            cache: true,
            parallel: true, // 开启并行压缩，充分利用cpu
            sourceMap: false,
            extractComments: false, // 移除注释
            uglifyOptions: {
                compress: {
                    unused: true,
                    warnings: false,
                    drop_debugger: true
                },
                output: {
                    comments: false
                }
            }
        }),
        new OptimizeCssAssetsPlugin({ // css优化配置，压缩css代码
            assetNameRegExp: /\.css$/g,
            cssProcessorOptions: {
                safe: true,
                autoprefixer: {
                    disable: true
                }, // 开启前缀的追加，默认情况不会去追加前缀
                mergeLonghand: false,
                discardComments: {
                    removeAll: true // 移除注释
                }
            },
            canPrint: true
        })
    ],
    optimization: {
        // 自定义分包策略，将覆盖默认配置
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "vendor",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        },
        runtimeChunk: {
            name: "runtime"
        },
    }
});

module.exports = config;